<template>
	<view class="index">
		<view class="top">
			<image src="../../static/login/图片4.png" mode=""></image>
		</view>
		<view class="content">
			<view class="content1">
				<view class="content11">
					登录
				</view>
				<view class="content12" @click="route2()">
					注册
				</view>
			</view>
			<view class="content2">
				政创机·人脉+递
			</view>
			<view class="content3">
				<input type="text" value="" placeholder="请输入手机号" class="content31" v-model="phone"/>
				<image src="../../static/login/图片5.png" mode="" class="content32"></image>
			</view>
			<view class="content3">
				<input type="text" value="" placeholder="请输入密码" class="content31" v-model="password"/>
				<image src="../../static/login/图片6.png" mode="" class="content32"></image>
			</view>
			<view class="content4"  @click="btn()">
				登录
			</view>
			<view class="content5" @click="route1()">
				忘记密码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:"",
				password:""
			};
		},
		methods:{
			route1(){
				uni.navigateTo({
					url:"../forget/forget"
				})
			},
			route2(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			//登录
			btn(){
				// if (this.phone.length != 11) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '手机号不正确'
				// 	});
				// 	return;
				// }
				// if (this.password.length < 6) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '密码不正确'
				// 	});
				// 	return;
				// }
				this.$u.post('/webLogin',{
					principal: this.phone,
					credentials: this.password
					}).then(res =>{
						console.log(res)
						let code = res.statusCode
						// console.log(res.data.access_token)
						
						if(code==200){
							uni.setStorageSync('token',res.data.access_token)
							uni.showToast({
								title:'登录成功'
							})
							
							setTimeout(()=>{
								uni.switchTab({
									url:'../../pages/index/index'
								})
							},1000)
						}
					}).catch((e) => {});
			}
		}
	}
</script>

<style lang="scss">
	.index {
		width: 100%;
		height: 100%;
	}
	.top {
		width: 780rpx;
		height: 520rpx;
		background: url(../../static/login/图片3.png);
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		
		image {
			width: 364rpx;
			height: 210rpx;
		}
	}
	.content {
		width: 100%;
		
		.content1 {
			width: 448rpx;
			height: 92rpx;
			border-radius: 40rpx;
			display: flex;
			margin: 0 auto;
			background-color: #FFFBF2;
			margin-top: -50rpx;
			
			.content11 {
				width: 282rpx;
				height: 92rpx;
				border-radius: 50rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 44rpx;
				color: #FFFFFF;
				background-color: #e9c775;
			}
			.content12 {
				width: 88rpx;
				height: 92rpx;
				line-height: 92rpx;
				font-size: 44rpx;
				color: #ABABAB;
				text-align: center;
				margin-left: 30rpx;
			}
		}
		.content2 {
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			color: rgba(173, 173, 173, 100);
			font-size: 20px;
			font-weight: 600;
		}
		.content3 {
			width: 475rpx;
			height: 90rpx;
			display: flex;
			margin: 80rpx auto;
			border-bottom: 2rpx solid #BBBBBB;
			
			.content31 {
				height: 80rpx;
				margin-left: 20rpx;
			}
			.content32 {
				width: 58rpx;
				height: 58rpx;
				margin-top: 10rpx;
				margin-left: 10rpx;
			}
		}
		.content4 {
			width: 474rpx;
			height: 92rpx;
			margin: 30rpx auto;
			text-align: center;
			line-height: 92rpx;
			background-color: #e9c775;
			border-radius: 50rpx;
			font-size: 44rpx;
			color: #FFFFFF;
		}
		.content5 {
			font-size: 28rpx;
			margin: 0 auto;
			text-align: center;
			color: #ABABAB;
		}
	}
</style>
